<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>0005_画一个圆带结束线帽</title>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
<script>
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  
  function drawGreyRing () {
    ctx.beginPath();
    ctx.arc(300, 300, 100, -(Math.PI / 180) * 90, (Math.PI / 180) * 270, false); // false 顺时针 true 是逆时针
    ctx.strokeStyle = '#dddddd';
    ctx.lineWidth = 40;
    // ctx.lineCap = 'round';
    ctx.stroke(); // 通过填充路径绘制实心图形
    ctx.closePath();
  }

  drawGreyRing()
  ctx.beginPath();
  ctx.strokeStyle = 'blue';
  ctx.arc(300, 300, 100, -(Math.PI / 180) * 90, (Math.PI / 180) * 60, false); 
  ctx.stroke(); // 通过填充路径绘制实心图形
  ctx.closePath();

  
  ctx.beginPath();
  ctx.fillStyle = 'red';
  ctx.arc(300, 200, 20, 0, (Math.PI / 180) * 360, false); 
  ctx.fill(); // 通过填充路径绘制实心图形3
  ctx.closePath();


  function getX (ev) { // 获取鼠标在canvas内坐标x
    return ev.clientX - canvas.getBoundingClientRect().left
  }

  function getY (ev) { // 获取鼠标在canvas内坐标y
  return ev.clientY - canvas.getBoundingClientRect().top
  }

    // 以canvas中心点为原心的坐标系(简称 中心坐标)
    function spotchange (a){ //屏幕坐标转化为中心坐标 200 200 是canvas中心点坐标
    var target={};
    if(a.x<300 && a.y<300){　　　　　　//二象限
        target.x=-(300-a.x); 
        target.y=300-a.y; 
    }else if(a.x>300 && a.y<300){　　//一象限  
        target.x=a.x-300; 
        target.y=300-a.y; 
    }else if(a.x>300 && a.y>300){　　//四象限
        target.x=a.x-300;
        target.y=-(a.y-300) 
    }else if(a.x<300 && a.y>300){　　//三象限
        target.x=-(300-a.x); 
        target.y=-(a.y-300); 
    } 
    return target; 
}

// 中心坐标（红色坐标）->屏幕坐标（黑色坐标）

function respotchange(a){ //中心坐标转化为屏幕坐标
    var target={};
    if(a.x>0 && a.y>0){
      target.x=300+a.x;
      target.y=(300-a.y);
    }else if(a.x<0 && a.y>0){
      target.x=300+a.x;
      target.y=300-a.y;
    }else if(a.x<0 && a.y<0){
      target.x=300+a.x;
      target.y=-(a.y-300)
    }else if(a.x>0 && a.y<0){
      target.x=300+a.x;
      target.y=-(a.y-300);
    }
    // target.y = 220 + target.y // y有偏移量
    return target;
  }


  var onCircularRing = false
  var onSlider = false
  function OnMouseDown(evt){
    var X=getX(evt);    //获取当前鼠标位置横坐标
    var Y=getY(evt);     //获取当前鼠标位置纵坐标
    // 距圆心的距离
    var dis = Math.pow(Math.pow(X - 300, 2) + Math.pow(Y - 300, 2), 0.5)
    var disSlider = Math.pow(Math.pow(X - 300, 2) + Math.pow(Y - 200, 2), 0.5)
    onCircularRing = (dis >= 80) && (dis <= 120)
    onSlider = disSlider <= 20
    console.log('判断鼠标是否在圆环上', onCircularRing) // 判断鼠标是否在圆环上
    console.log('判断是不是在滑点上', onSlider)
    // 判断是不是在滑点上

    // 屏幕坐标转中心坐标
    var screenPoint = spotchange({x:X, y:Y})
    console.log('中心坐标', screenPoint)
    var silderCP = getRadian(screenPoint.x, screenPoint.y) // CP -> 中心坐标
    console.log('滑动点中心坐标', silderCP) // 中心坐标
    // 中心坐标转屏幕坐标
    var silderSP = respotchange({ x:silderCP.x, y:silderCP.y })// SP -> 屏幕坐标
    console.log('滑动点屏幕坐标', silderSP) // 中心坐标


    ctx.clearRect(0, 0, 600, 600)
    drawGreyRing()
    ctx.beginPath();
    ctx.fillStyle = 'red';
    ctx.arc(silderSP.x, silderSP.y, 20, 0, (Math.PI / 180) * 360, false); 
    ctx.fill(); // 通过填充路径绘制实心图形3
    ctx.closePath();
}

function getRadian(lx,ly) {
  var tem={};    //存放目标坐标位置
  if (lx == 0) {
    tem.o = ly >= 0 ? Math.PI / 90 : Math.PI // 90或180度
  } else {
    tem.o=Math.atan(ly/lx); // 鼠标移动点圆形角
  }
  tem.x = 100 *Math.cos(tem.o);
  tem.y= 100*Math.sin(tem.o);
  if(lx<0){ //坐标点处理（正负）
    tem.x=-tem.x;
    tem.y=-tem.y;
  }
  return tem
  // if(lx>0){  //弧度值处理
  // tem.z=-Math.atan(tem.y/tem.x)+Math.PI*2;
  // }else{
  // tem.z=-Math.atan(tem.y/tem.x)+Math.PI;
  // }

}
function onMouseMove () { // 拖拽
  if (onCircularRing && onSlider) {
    console.log(11)
  }
}

function onMouseUp () { // 鼠标抬起释放
  onCircularRing = false
  onSlider = false
}

  function addEvent () {
    canvas.addEventListener("mousedown", OnMouseDown.bind(canvas))
    canvas.addEventListener("mousemove", onMouseMove.bind(canvas))
    canvas.addEventListener("mouseup", onMouseUp.bind(canvas))
  }
  addEvent()
</script>
</html>